<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
        <div class="logo">{{title}}</div>
        <div class="header-right">
            <p>15557902837</p>
            <el-link :underline="false" @click="loginout">退出</el-link>
        </div>

    </div>
</template>
<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            collapse: false,
            fullscreen: false,
            name: 'linxin',
            message: 2,
            title:'首页'
        };
    },
    computed: {
        username() {
            let username = localStorage.getItem('ms_username');
            return username ? username : this.name;
        }
    },
    methods: {
        // 用户名下拉菜单选择事件
        loginout(){
            this.$confirm('确定要返回到登录界面吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '已返回到登录界面!'
            });
                localStorage.removeItem('ms_username');
                this.$router.push('/login');
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消选择'
                });          
            });
        },
        // 侧边栏折叠
        collapseChage() {
            this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        }
    },
    mounted() {
        if (document.body.clientWidth < 1500) {
            this.collapseChage();
        }
        // 绑定自定义事件，选择一级菜单时改变header组件的title信息
        bus.$on('changeTitle',(val)=>{
            this.title = val;
        })
        // 绑定自定义事件，当点击一级菜单的时候将collapse改为false
        bus.$on('changeCollapse',()=>{
            this.collapse = false;
        })
    },
    beforeDestroy(){
        bus.$off('changeTitle');
        bus.$off('changeCollapse');
    }
};
</script>
<style scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 150px);
    left: 150px;
    height: 70px;
    font-size: 22px;
    color: #000;
    background-color: #FFFFFF;
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}
.collapse-btn:hover{
    background-color: #ccc;
}
.header .logo {
    float: left;
    width: 250px;
    line-height: 70px;
}
.header-right {
    float: right;
    height: 100%;
    padding-right: 20px;
    font-size: 16px;
}
.header-right p{
    margin-top: 10px;
    margin-bottom: 10px;
}
.header-right .el-link{
    float: right;
}
</style>
